<template>
  <div class="article-box">
    <!-- 导航栏 -->
    <van-nav-bar fixed placeholder title="文章详情" left-arrow @click-left="$router.back()" />
    <!-- 标题 -->
    <h2>{{ info.title }}</h2>
    <!-- 作者信息区域 -->
    <div class="aut-box">
      <div class="left-box">
        <!-- 图片 -->
        <van-image :src="info.aut_photo" round fit="cover" />
        <!-- 文字信息 -->
        <div class="text-box">
          <div class="name">{{ info.aut_name }}</div>
          <span class="time">{{ $relvTime(info.pubdate) }}</span>
        </div>
      </div>
      <van-button round size="small" type="info" icon="plus">关注</van-button>
    </div>

    <!-- 文章内容 -->
    <div class="content" v-html="info.content"></div>

    <!-- 分割线 -->
    <van-divider>评论列表</van-divider>

    <!-- list -->
    <my-comment />
  </div>
</template>

<script>
// 导入接口
import { detailAPI } from '@/api/news'
// 导入组件
import MyComment from './components/MyComment'
export default {
  name: 'MyArticle',
  components: {
    MyComment
  },
  data () {
    return {
      info: {}
    }
  },
  async created () {
    const res = await detailAPI(this.$route.params.id)
    this.info = res.data
  }
}
</script>

<style lang="less" scoped>
.article-box {
  h2 {
    font-size: 20px;
    margin: 20px;
  }

  .aut-box {
    margin: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-box {
      display: flex;
      align-items: center;
      .van-image {
        width: 80px;
        height: 80px;
        margin-right: 10px;
      }

      .text-box {
        .name {
          margin-bottom: 10px;
        }
        .time {
          font-size: 12px;
          color: gray;
        }
      }
    }
  }

  .content {
    padding: 20px;
    width: 100vw;
    box-sizing: border-box;

    ::v-deep pre {
      width: 100%;
      overflow: auto;
      background-color: #000;
      color: #ddd;

      span {
        color: #ddd !important;
      }
    }
  }
}
</style>
